

<style>
    #week-login-chart,#mouth-operator-chart{
        height:300px;
    }

</style>
<div class="container-fluid">

                <div class="row">
                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-primary">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">网页设计实例</p>
                                    <p class="h3 text-white m-b-0">5</p>
                                </div>
                                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-language-html5 fa-1-5x"></i></span> </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-danger">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">表单设计实例</p>
                                    <p class="h3 text-white m-b-0">200</p>
                                </div>
                                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-calendar-text fa-1-5x"></i></span> </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-success">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">看板实例</p>
                                    <p class="h3 text-white m-b-0">10</p>
                                </div>
                                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-chart-pie fa-1-5x"></i></span> </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-purple">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">总用户数</p>
                                    <p class="h3 text-white m-b-0">153</p>
                                </div>
                                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-comment-outline fa-1-5x"></i></span> </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h4>周登入频次</h4>
                            </div>
                            <div class="card-body">
                                <div id="week-login-chart"></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h4>月操作频次</h4>
                            </div>
                            <div class="card-body">
                                <div id="mouth-operator-chart"></div>
                            </div>
                        </div>
                    </div>

                </div>



            </div>
<!--图表插件-->
<script type="text/javascript" src="/static/plugins/js/chart/echarts-5.4.2.min.js"></script>
<!--消息提示-->
<script type="text/javascript">
    $(document).ready(function(e) {


        let  aoption = {
            tooltip: {},   //提示信息

            xAxis: {
                //data：数据,x 轴的数据
                data: ["周一","周二","周三","周四","周五","周六","周日"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };


             let aChart=echarts.init(document.getElementById("week-login-chart"));
             // 3. 把配置给实例对象
             aChart.setOption(aoption);

        let  boption = {
            tooltip: {},   //提示信息

            xAxis: {
                //data：数据,x 轴的数据
                data: ["2023/06/21","2023/06/21","2023/06/21","2023/06/21","2023/06/21","2023/06/21"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };


        let bChart=echarts.init(document.getElementById("mouth-operator-chart"));
        // 3. 把配置给实例对象
        bChart.setOption(boption);
        // 4. 让图表跟随屏幕自动的去适应
        window.addEventListener("resize", function () {
            aChart.resize();
            bChart.resize();
        });


    });
</script>

